<template>
    <div id="footer">
        <ul>
            <router-link tag="li" to="/movie">
                <i class="fa fa-film"></i>
                <p>电影</p>
            </router-link>
            <router-link tag="li" to="/cinema">
                <i class="fa fa-square"></i>
                <p>影院</p>
            </router-link>
            <router-link tag="li" to="/mine">
                <i class="fa fa-user-circle"></i>
                <p>我的</p>
            </router-link>
        </ul>
    </div>
</template>
<script>
    export default{
        name:'TabBar',

    }
</script>
<style scoped>
    #footer{
        position: fixed;
        bottom: 0px;
        width: 100%;
        background: #fff;
        border-top: 2px solid #ccc;
    }
    li{
        display: inline-block;
        width: 33%;
        text-align: center;
        margin: 10px 0;
    }
    .router-link-active{
        color: #e54847;
    }
</style>